<template>
  <div class="header">
    <div class="my-box">
      <div class="my-box-blur blur"></div>
      <div class="user-box">
        <p class="user-box-img"></p>
        <p class="user-box-text">吴薇</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  components: {
  },
  data () {
    return {
    }
  },
  watch: {
  },
  methods: {
  },
  mounted () {
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.my-box
  width: 100%
  height: 300px
  position: relative
  overflow hidden
  .my-box-blur
    width: 100%
    height: 300px
    bg-image('my-bg')
    background-repeat: no-repeat
    background-size: 100% 100%
    position: absolute
    top: 0
    left: 0
  .user-box
    width: 100px
    height:150px
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    margin: auto
  .user-box-img
    width: 100px
    height: 100px
    border: 2px solid #fff
    border-radius: 50%
    bg-image('user-logo')
    background-repeat: no-repeat
    background-size: 100% 100%
  .user-box-text
    height: 50px
    line-height:50px
    color: #fff
    text-align:center
    font-size:0.5rem
.blur
  filter: blur(3px)
</style>
